<template>
  <div>
    <breadc-rumb>
      <div class="directory" slot="breadc-button">
        <product-directory backColor="#e7e7e7" @onClick="handleCategoriesClick"
          :productList="productCategoriesList"></product-directory>
      </div>
    </breadc-rumb>
    <div class="product-list-content">
      <div class="container" v-loading="listLoading">
        <template v-if="productList.length > 0">
          <div class="product-list">
            <div class="product">
              <div class="product-item" v-for="(item, index) in productList">
                <a :href="'/product/ProductDetails?id=' + item.id"
                  :title="item.productName + ' - ' + $t('product.list.understand')">
                  <div class="product-images">
                    <el-image :src="item.mainImageUrl">
                      <div slot="error" class="image-error"></div>
                    </el-image>
                  </div>
                  <div class="product-content">
                    <p class="product-name">{{ item.productName }}</p>
                    <p class="product-describe">{{ item.shortDescription }}</p>
                  </div>
                </a>
              </div>
            </div>
          </div>
          <div class="page-tool">
            <el-pagination class="page" background layout="prev, pager, next" :page-size="pageSize"
              :current-page="pageIndex" :total="pageTotal" @current-change="changePageIndex">
            </el-pagination>
          </div>
        </template>
        <template v-else>
          <div class="empty">
            <el-empty :description="$t('product.list.emptyDescription')"></el-empty>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import BreadcRumb from '@/components/BreadcRumb.vue';
import ProductDirectory from '@/components/Product/ProductDirectory.vue';
import ButtomUrl from "@/components/Button/ButtomUrl";
import * as productApi from '@/api/web/productApi';
import Enumerable from 'linq';

export default {
  components: {
    BreadcRumb,
    ProductDirectory,
    ButtomUrl
  },
  data () {
    return {
      categoriesId: null,
      categoriesName: "",
      productCategoriesList: [],
      pageIndex: 0,
      pageTotal: 0,
      pageSize: 20,
      productList: [],
      listLoading: false,
    }
  },
  methods: {
    getAllProductCategorieList () {
      productApi.getAllProductCategorieList()
        .then(res => {
          if (res.code == 200) {
            this.productCategoriesList = res.data;
            if (this.categoriesId != null) {
              var activateCategories = Enumerable
                .from(this.productCategoriesList)
                .where(p => p.id == this.categoriesId)
                .firstOrDefault();
              if (activateCategories != null) {
                this.categoriesName = activateCategories.categoryName;
              }
            }
          }
        })
    },
    handleCategoriesClick (item) {
      this.categoriesId = item.id;
      this.pageIndex = 0;
      this.pageTotal = 0;
      this.loadProduct();
    },
    loadProduct () {
      this.listLoading = true;
      productApi.getProductList(this.categoriesId, this.pageIndex, this.pageSize)
        .then(res => {
          if (res.code == 200) {
            this.productList = res.data.data;
            this.pageIndex = res.data.pageIndex;
            this.pageSize = res.data.pageSize;
            this.pageTotal = res.data.toalNumber;
            this.listLoading = false;
          }
        });
    },
    changePageIndex (num) {
      var self = this;
      self.pageIndex = num;
      self.loadProduct();
    },
  },
  watch: {
    categoriesId () {
      var activateCategories = Enumerable
        .from(this.productCategoriesList)
        .where(p => p.id == this.categoriesId)
        .firstOrDefault();
      if (activateCategories) {
        //置面包屑标题
        this.$router.currentRoute.meta.bread = [
          { path: "/Product", name: "product.title" },
          { path: "/Product?categoriesId=" + activateCategories.id, name: activateCategories.categoryName },
        ];
      }
    }
  },
  mounted () {
    if (this.$route.query.categoriesId != null) {
      this.categoriesId = parseInt(this.$route.query.categoriesId);
    }
    this.getAllProductCategorieList();
    this.loadProduct();
  }
}
</script>

<style scoped>
.product {
  display: flex;
  flex-wrap: wrap;
}

.product-list {
  margin-top: 20px;
  margin-bottom: 20px;
}

.product-item {
  width: calc(25% - 20px);
  margin: 10px;
  padding: 10px 0px;
  box-sizing: border-box;
  background: #fff;
  color: #000;
}

.product-item a {
  text-decoration: none;
}

.product-images {
  position: relative;
  width: 100%;
  /* padding: 0px 20px; */
  box-sizing: border-box;
}

.product-images>>>.el-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.product-images>>>.el-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.product-content {
  box-sizing: border-box;
}

.product-name {
  padding: 10px 0px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  color: #303133;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: #EBEEF5 1px solid;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.product-item:hover .product-name {
  border-bottom: #806e22 1px solid;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  color: #806e22;
}

.product-describe {
  width: 100%;
  margin: 20px 0px;
  line-height: 22px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  color: #909399;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 45px;
}

.product-btns {
  float: right;
  margin-top: 10px;
}

.product-list-content {
  /* background: #e7e7e7; */
  background: #fff;
  padding: 5vh 0px;
}

.categories-title {
  text-align: center;
  padding: 5vh 0px;
  color: #806e22;
}

.page-tool {
  padding-bottom: 20px;
  text-align: center;
}

.page>>>.active {
  background-color: #806e22 !important;
  color: #FFF;
}

.page>>>.el-pager li {
  border-radius: 0px;
}

.page>>>.btn-prev {
  border-radius: 0px;
}

.page>>>.btn-next {
  border-radius: 0px;
}

.empty {
  width: 100%;
  background: #fff;
  margin-top: 20px;
}

.el-image>>>.image-error {
  height: 100%;
  width: 100%;
  background: #C0C4CC;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

.product-list-content>>>.el-loading-spinner .path.path {
  stroke: #806e22
}
</style>